<template>
	<view class="tui-discount-box tui-radius-all" v-if="couponList.length > 0" :class="{'tui-mtop':!shopsId}">
		<view clclass="flex justify-start align-center font-16" style="width: 682rpx;" v-if="shopsId">
			<tui-divider dividerColor="#DCDCDC" width="100%" height="80"></tui-divider>
		</view>
		<view class="tui-list-cell" @tap="coupon" :style="!shopsId?'padding: 36rpx 30rpx;':''">
			<view class="tui-bold tui-cell-title">领券</view>
			<view class="flex align-center">
				<tui-tag v-for="(item,index) in couponList" :key="index" type="red" shape="circle" v-if="index<3"
					padding="12rpx 24rpx" margin="0 10rpx" size="24rpx">
					<text v-if="item.couponType==1">满{{item.minPrice}}元减{{item.subPrice}}</text>
					<text v-if="item.couponType==2">满{{item.minPrice}}元{{item.discount}}折扣</text>
					<text v-if="item.couponType==3">满{{item.fullPart}}件{{item.discount}}折扣</text>
					<text v-if="item.couponType==4">满{{item.fullPart}}件减{{item.subPrice}}</text>
				</tui-tag>
			</view>
			<view class="tui-ml-auto">
				<tui-icon name="more-fill" :size="20" color="#666"></tui-icon>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'goods-colomn',
		components: {},
		props: {
			goodsId: {
				type: String,
				default () {
					return ''
				}
			},
			shopsId: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				couponList: []
			};
		},
		computed: {},
		watch: {
			goodsId(val) {
				this.getCouponList();
			},
			shopsId(val) {
				this.getCouponList();
			}
		},
		created() {
			this.getCouponList();
		},
		methods: {
			getCouponList() {
				let that = this;
				that.couponList = [];
				if (!this.goodsId && !this.shopsId) {
					return;
				}
				console.log('goodsId', this.goodsId)
				util.request('coupon/couponList', {
					shopsId: that.shopsId,
					goodsId: that.goodsId
				}).then(function(res) {
					if (res.code === 0) {
						that.couponList = res.data
					}
				});
			},
			coupon() {
				uni.navigateTo({
					url: '/pages/shopping/couponCenter/couponCenter'
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}
</style>
